{% extends 'universal/myself_base.html' %}
{% from 'universal/macro.html' import pagination_show %}{# 导入宏，格式是from 宏所在文件名 import 宏名 #}
{% block title %}{{ type.type_name }}{% endblock %}
{% block page_content %}
    <div>{% if not pagination.items %}<span>当前类型还没有任何文章，快去发布一篇吧！</span>{% endif %}</div><!--复制的detail.html-->
    <div>
        {% for i in pagination.items %}<!--复制的detail.html-->
            <div class="media"><!--复制的all_article.html，但改了作者后的时间的显示方式-->
                <div class="media-left">
                    <a href="{{ url_for('article.search_by_user') }}?user_id={{ i.uid }}">
                        <img class="media-object" src="{{ url_for('static',filename='upload/'+i.user.portrait_file_name) }}" alt="portrait" style="width:64px;height:64px;">
                    </a>
                </div>
                <div class="media-body">
                    <div style="float:right;color:silver;">{{ moment(i.timestamp).fromNow() }}</div>
                    <h4 class="media-heading"><a href="{{ url_for('article.detail') }}?aid={{ i.id }}">{{ i.title }}</a></h4>
                    <p>
                        <a href="{{ url_for('article.search_by_user') }}?user_id={{ i.uid }}" style="color:inherit;">{{ i.user.username }}</a>
                        <span style="color:lightslategray;">{{ i.timestamp | show_time }}</span>
                        <span class="label label-info collect_span" url="{{ url_for('article.collected_or_liked',article_id=i.id) }}">
                            {% if current_user.is_authenticated and current_user.is_collected_or_liked(i.id) %}
                                <span class="glyphicon glyphicon-star" aria-hidden="true" id="collect_icon" tag="1">取消收藏{{ i.collect_times }}</span>
                            {% else %}
                                <span class="glyphicon glyphicon-star-empty" aria-hidden="true" id="collect_icon" tag="0">收藏{{ i.collect_times }}</span>
                            {% endif %}
                        </span>
                        &nbsp;<!--故意加的空格，作两个标签的间隔-->
                        <span class="label label-info like_span" url="{{ url_for('article.collected_or_liked',article_id=i.id) }}">
                            {% if current_user.is_authenticated and current_user.is_collected_or_liked(i.id) %}
                                <span class="glyphicon glyphicon-heart" aria-hidden="true" id="like_icon" tag="1">取消点赞{{ i.star_times }}</span>
                            {% else %}
                                <span class="glyphicon glyphicon-heart-empty" aria-hidden="true" id="like_icon" tag="0">点赞{{ i.star_times }}</span>
                            {% endif %}
                        </span>
                        &nbsp;<!--故意加的空格，作两个标签的间隔-->
                        <span class="label label-default">阅读量{{ i.click_times }}</span>
                        &nbsp;<!--故意加的空格，作两个标签的间隔-->
                        <span class="label label-default">{{ i.article_type.type_name }}</span>
                    </p>
                    <div>{{ i.content | safe | myself_trim }}</div>
                </div>
            </div>
        {% endfor %}
    </div>
    {% if pagination.items %}<!--复制的detail.html-->
        {{ pagination_show(pagination,'article.search_by_type',type_id=type.id) }}
    {% endif %}
{% endblock %}
{% block scripts %}<!--复制的all_article.html-->
    {{ super() }}
    <script>
        $(function (){
            $('.collect_span').click(function (){
                let _this=$(this)
                let tag=_this.children('span').attr('tag')
                $.post(_this.attr('url'),function (data){
                    if(tag==0){
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-star')
                        _this.children('span').text('取消收藏'+data.number)
                        _this.children('span').attr('tag','1')
                    }else {
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-star-empty')
                        _this.children('span').text('收藏'+data.number)
                        _this.children('span').attr('tag','0')
                    }
                })
            })
            $('.like_span').click(function (){
                let _this=$(this)
                let tag=_this.children('span').attr('tag')
                $.post(_this.attr('url'),function (data){
                    if(tag==0){
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-heart')
                        _this.children('span').text('取消点赞'+data.number)
                        _this.children('span').attr('tag','1')
                    }else {
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-heart-empty')
                        _this.children('span').text('点赞'+data.number)
                        _this.children('span').attr('tag','0')
                    }
                })
            })
        })
    </script>
{% endblock %}